import React, { useState } from 'react';
import { TabBar } from 'antd-mobile';
import { history } from 'umi';

const BottomTabBar = (props: any) => {
    const [pageKey, setPageKey] = useState(props.pageKey);
    const tabBarData = [
        { title: '首页', key: 'home', link: '/home' },
        { title: '游戏', key: 'gameList', link: '/gameList' },
        { title: '我的', key: 'mine', link: '/mine' },
    ];
    const changePage = (link: string) => {
        history.push(link);
    }
    return (
        <TabBar
            unselectedTintColor="#949494"
            tintColor="#33A3F4"
            barTintColor="white"
            tabBarPosition="bottom"
        >
            {
                tabBarData.map((tabBar) => (
                    <TabBar.Item
                        title={tabBar.title}
                        key={tabBar.key}
                        selected={pageKey === tabBar.key}
                        onPress={() => changePage(tabBar.link)}
                        icon={<></>}
                        selectedIcon={<></>}
                    >
                        {
                            pageKey === tabBar.key ? 
                                props.children : 
                                tabBar.title
                        }
                    </TabBar.Item>
                ))
            }
        </TabBar>
    );
}

export default BottomTabBar;